<template>
  <view class="container">
    <view class="setting-item">
      <text>已绑定车辆</text>
      <view v-if="vin" class="vin-display">
        <text class="vin-number">{{ vin }}</text>
      </view>
      <view v-else class="vin-bind">
        <button class="bind-button" @click="bindVin">去绑定</button>
      </view>
    </view>
    <view class="setting-item">
      <text>开启/停止运营</text>
      <switch @change="onOperationChange" />
    </view>
    <view class="setting-item">
      <text>运营时间</text>
      <picker mode="time" @change="onTimeChange">
        <view>设置时间</view>
      </picker>
    </view>
    <view class="setting-item">
      <text>自定义电费</text>
      <switch @change="onCustomFeeChange" />
    </view>
    <view class="setting-item">
      <text>设置自定义电费</text>
      <input type="number" placeholder="输入电费" />
    </view>
    <view class="setting-item">
      <text>占位处罚</text>
      <switch @change="onPenaltyChange" />
    </view>
    <button>故障报修</button>
    <button>申请解除协议/移动充电桩</button>
    <view>客服电话: 123-456-7890</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      vin: '', // 车辆VIN码
    };
  },
  methods: {
    onOperationChange(e) {
      console.log('Operation status:', e.detail.value);
    },
    onTimeChange(e) {
      console.log('Time changed:', e.detail.value);
    },
    onCustomFeeChange(e) {
      console.log('Custom fee status:', e.detail.value);
    },
    onPenaltyChange(e) {
      console.log('Penalty status:', e.detail.value);
    },
    bindVin() {
      uni.navigateTo({ url: '/pages/vehicle/bind' });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
}
</style>